<template>
  <div class="box">
    <h1>父组件 曹操 :{{ money }}</h1>
    <button @click="handler">向 子组件 曹植 借十元</button>
    <hr />
    <Son ref="son"/>
    <hr>
    <Dau/>
  </div>
</template>

<script setup lang="ts">
//ref:可以获取真实的DOM节点,可以获取到子组件实例VC
//$parent:可以在子组件内部获取到父组件的实例
//引入子组件
import Son from './Son.vue';
import Dau from './Daughter.vue';
import { ref } from 'vue';
// 父组件的钱数
let money = ref(10000);
// 获取子组件实例 
let son=ref()
// 父组件内部按钮点击回调 
const handler=()=>{
  money.value+=10
  console.log(son.value)
  son.value.money-=10
  son.value.fly()
}
// 对外暴露 
defineExpose({
  money
})
</script>

<style scoped>
.box {
  width: 100vw;
  height: 500px;
  background: rgb(205, 232, 243);
}
</style>